import { SearchOutlined } from '@ant-design/icons'
import { Input } from 'antd'

export default function Header({ query, handleSearch }: { query: string; handleSearch: (val: string) => void }) {
  const handleChange = event => {
    handleSearch(event.target.value)
  }
  return (
    <div className="flex items-center justify-between border-b px-4" style={{ background: '#FFFFFF', height: '58px' }}>
      <div className="flex items-center gap-2 py-4">
        <img src="/migu-logo.jpg" className="h-[19px] w-[66px] rounded" />
      </div>
      <div className="flex">
        <Input
          value={query}
          onChange={handleChange}
          className="manual-filter-input"
          allowClear
          placeholder="搜索"
          prefix={<SearchOutlined />}
        />
      </div>
    </div>
  )
}
